<template>
  <div class="app-container">
    <div class="my-define-dialog-title">
      {{dialogTitle}}
      <div class="my-define-dialog-title-btn">
        <i @click="submitForm" class="saas-iconfont saas-icon-baocun1"></i>
        <i @click="cancel(false)" class="saas-iconfont saas-icon-caozuo-quanping-shousuo"></i>
      </div>
    </div>
    <el-scrollbar :style="customeStyle">
      <el-form size="medium" ref="myForm" :model="formData" :label-width="labelForm.labelWidth"
        :label-position="labelForm.labelPosition">
        <el-row>
          <el-col :span="24">
            <el-form-item label="通知对象" :prop="'showList'" :rules="{
                      required: true, message: '请选择', trigger: 'change'}">
              <el-checkbox-group v-model="formData.showList">
                <el-checkbox :label="1">APP</el-checkbox>
                <el-checkbox :label="2">小程序</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否置顶" :prop="'IsTopShow'" :rules="{
                      required: true, message: '请输入', trigger: 'change'}">
              <el-radio-group v-model="formData.IsTopShow">
                <el-radio :label="true">
                  是
                </el-radio>
                <el-radio :label="false">
                  否
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="formData.showList.indexOf(2)>-1">
            <el-form-item :prop="'roomNames'" :rules="{
                      required: true, message: '请选择', trigger: 'change'}">
              <template slot="label">
                通知范围
                <el-link @click="doChooseRoom()" type="primary" class="choose-link">
                  选择资源
                </el-link>
              </template>
              {{formData.roomNames}}
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="formData.showList.indexOf(1)>-1">
            <el-form-item :prop="'userNames'" :rules="{
                      required: true, message: '请选择', trigger: 'change'}">
              <template slot="label">
                通知范围
                <el-link @click="doChooseUser()" type="primary" class="choose-link">
                  选择用户
                </el-link>
              </template>
              {{formData.userNames}}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-scrollbar>
    <el-dialog custom-class="my-common-dialog" :width="dialogWidth" :close-on-click-modal="false"
      :visible.sync="showDetail" :show-close="false" append-to-body>
      <div :is="currentView" v-if="showDetail" :dialogTitle="showTitle"></div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getToken
  } from '@/utils/auth'
  import {
    getNotify,
    publisNotify
  } from '@/api/system/notify'
  import defaultSettings from '@/settings'
  import userChoose from "@/views/system/users/choose"
  export default {
    name: 'notify-edit',
    props: {
      Id: {
        type: Number,
        default: 0
      },
      dialogTitle: {
        type: String,
        default: ''
      }
    },
    components: {
      userChoose
    },
    data() {
      return {
        customeStyle: {
          height: (window.innerHeight - 180) + 'px'
        },
        labelForm: defaultSettings.labelForm,
        fieldData: [],
        formData: {
          Id: 0,
          IsTopShow: false,
          showList: [],
          roomIdList: [],
          roomNames: '',
          userIdList: [],
          userNames: ''
        },
        dialogWidth: '50%',
        showDetail: false,
        currentView: '',
        showTitle: ''
      }
    },
    created() {
      this.getData()
    },
    methods: {
      /** 查询Form数据 */
      getData() {
        getNotify({
          Id: this.Id
        }).then(res => {
          if (res.status) {
            var model = res.outputData.model;
            this.formData.IsTopShow = model.IsTopShow
            this.formData.roomIdList = res.outputData.roomIdList
            this.formData.roomNames = res.outputData.roomNames
            this.formData.userIdList = res.outputData.userIdList
            this.formData.userNames = res.outputData.userNames
            if (model.ShowOnApp) {
              this.formData.showList.push(1)
            }
            if (model.ShowOnWechat) {
              this.formData.showList.push(2)
            }
          }
        })
      },
      submitForm() {
        var that = this;
        this.$refs['myForm'].validate(valid => {
          if (valid) {
            publisNotify({
              Id: this.Id,
              IsTopShow: this.formData.IsTopShow,
              ShowOnApp: this.formData.showList.indexOf(1) > -1,
              ShowOnWechat: this.formData.showList.indexOf(2) > -1,
              roomIds: JSON.stringify(this.formData.roomIdList),
              userIds: JSON.stringify(this.formData.userIdList)
            }).then(res => {
              if (res.status) {
                this.$message({
                  message: this.formData.Id > 0 ? '修改成功' : '新增成功',
                  type: 'success'
                })
                this.cancel(true);
              }
            })
          }
        })
      },
      cancel(reload) {
        this.$$parent(this, "doClosePop", {
          reload: reload
        })
      },
      doChooseRoom() {
        this.showDetail = true
        this.showTitle = '选择资源'
        this.currentView = 'roomChoose'
      },
      doSaveRoomChoose(data) {
        var roomIdList = []
        var roomNameList = []
        data.forEach((item) => {
          roomIdList.push(item.value)
          roomNameList.push(item.label)
        })
        this.formData.roomIdList = roomIdList
        this.formData.roomNames = roomNameList.join(',')
        this.showDetail = false
      },
      doClosePop(reload) {
        this.showDetail = false
      },
      doChooseUser() {
        this.showDetail = true
        this.showTitle = '选择员工'
        this.currentView = 'userChoose'
      },
      doSaveUserChoose(data) {
        var userIdList = []
        var userNameList = []
        data.forEach((item) => {
          userIdList.push(item.value)
          userNameList.push(item.label)
        })
        this.formData.userIdList = userIdList
        this.formData.userNames = userNameList.join(',')
        this.showDetail = false
      },
      doClosePop(reload) {
        this.showDetail = false
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  .my-dontai-title {
    font-size: 14px;
    line-height: 40px;
    border-bottom: solid 0.5px #d1d1d1;
    padding-left: 16px;
    color: #262626;
    font-weight: 700;
	border-image: linear-gradient( to bottom,transparent  50%,#ddd 50%) 0 0 100% 0 ;
  }

  .el-link.choose-link {
    font-size: 14px;
    margin-left: 10px;
  }
</style>
